
{% extends '::base.html.twig' %}


{% block title %}Ankieta{% endblock %}
{% block header %}{%endblock%}
{% block body %}{%block mainContent %}
        <h1 style="text-align: center;margin-bottom: 20px;">Ankieta</h1><h5 style="text-align:center;font-weight:bold">Zaproszenie dla {{invitation.email}}</h5><div class="progress">
        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="{{(currentStep-1)/allSteps*100}}" aria-valuemin="0" aria-valuemax="100" style="width: {{(currentStep-1)/allSteps*100}}%">
            
        </div>
        
    </div>
        <div>Pytanie {{currentStep}} z {{allSteps}}
            <div style="float:right;">{{((currentStep-1)/allSteps*100) | number_format(0,'.',',') }} %</div>
    
        <h2 style="text-align: center">Który produkt jest lepszy Twoim zdaniem?</h2>
        <h5 style="text-align: center">Przeciągnij suwak pod zdjęciami proporcjonalnie w stronę lepszego produktu i kliknij "Dalej".</h5>
         
    <br />
    <div style="width:40%;font-size:35px;float:left"> {{product1.name}}</div> 
    <div style="width:40%;font-size:35px;float:right; text-align: right"> {{product2.name}}</div> <br />
    
    <div style="clear:both"></div>
    <img style="width:300px; float:left;" src="{{ product1.imageurl }}" />
    <img style="width:300px; float: right" src="{{ product2.imageurl }}" />
    <div style="clear:both"></div>
    <br />
    <div id="prod1color" class="colorproduct"></div>
    <div id="prod2color" class="colorproduct"></div>
    <input style="float:left;visibility: hidden;" id="amount-input1" class="input-short" type="text" name="prod1" placeholder="">
    <input style="float:right;visibility: hidden;" id="amount-input2" class="input-short" type="text" name="prod2" placeholder="">
    <div style="clear:both"></div>
    <div id="slider" style="background: none repeat scroll 0 0 #2A89F7;
border: medium none;
border-radius: 10px;

position: relative;
top: 20px;
width: 100%;
margin-bottom: 20px;
height:20px;
"></div>
    <br />
    {#<form oninput="amount.value=rangeInput.value">
    <input type="range" id="rangeInput" name="rangeInput" min="-9" max="9">                                                       

        <output name="amount" for="rangeInput">0</output>
        </form>#}
    {#{%if prevStep is not null %}
    <a style="float:left"  href="{{path('product_compare', {'survey_id':product1.survey.id,'compareStep':prevStep,'invitation_id':invitation.id})}}" class="btn btn-primary">Poprzednie</a>
    {%endif%}
    {%if nextStep is not null %}
    <a style="float:right" href="{{path('product_compare', {'survey_id':product1.survey.id,'compareStep':nextStep,'invitation_id':invitation.id})}}" class="btn btn-primary">Następne</a> 
    {%else%}
    <a style="float:right"  href="#" class="btn btn-primary">Koniec</a> 
    {% endif %} {{wynikmnozenia}}
    Wynik mnozenia: 
    <br />
    Pierwiastego n stopnia: {{wyniktestowy}}
    <br />#}
    {{ form_start(form) }}
        
        <div style="visibility:hidden; height: 0;">
        {{ form_row(form.prod1value) }}
        {{ form_row(form.prod2value) }}
        </div>
        
        <div style="visibility:hidden">{{ form_widget(form.save) }}</div>
        <button style="margin-bottom:30px;" name="form[save]" id="form_save" type="submit" class="btn btn-lg btn-success pull-right">Dalej</button>
        <br /><br />
    {{ form_end(form) }}
    {% endblock %}
    {% block javascripts %}
        {{ parent() }}
         <script>
        $(function(){
          var values1=['1','1','1','1','3','6','9'];
          var values2=['9','6','3','1','1','1','1'];
          var colors1=['#19b100','#91da85','#ceeec9','#FFF','#ffc9c9','#ff8585','#ff0000'];
          var colors2=['#ff0000','#ff8585','#ffc9c9','#FFF','#ceeec9','#91da85','#19b100'];
          var green="#19B100";
          var red="#ff0000";
          
          $( "#amount-input1" ).val( 1 );
                $( "#amount-input2" ).val(  1 );
              
                $( "#form_prod1value" ).val(  1 );
                $( "#form_prod2value" ).val( 1 );
          
          $("#slider").slider({
            value:350,
            min: 0,
            max: 700,
            step: 1,
            slide: function( event, ui ) {
                var currentValue=3;
                var currentOpacity=0;
                var leftColor="#FFF";
                var rightColor="#FFF";
              
                if(ui.value>=0 && ui.value<100){currentValue=0;leftColor=green;rightColor=red;}else
                if(ui.value>=100 && ui.value<200){currentValue=1;leftColor=green;rightColor=red;}else
                if(ui.value>=200 && ui.value<300){currentValue=2;leftColor=green;rightColor=red;}else
                if(ui.value>=300 && ui.value<400){currentValue=3;}else
                if(ui.value>=400 && ui.value<500){currentValue=4;leftColor=red;rightColor=green;}else
                if(ui.value>=500 && ui.value<600){currentValue=5;leftColor=red;rightColor=green;}else
                if(ui.value>=600 && ui.value<=700){currentValue=6;leftColor=red;rightColor=green;}
                
                $( "#amount-input1" ).val(  values2[currentValue] );
                $( "#amount-input2" ).val(  values1[currentValue] );
              
                $( "#form_prod1value" ).val(  values2[currentValue] );
                $( "#form_prod2value" ).val(  values1[currentValue] );
              
                $( "#prod1color" ).css('background-color',leftColor);//colors1[currentValue]
                $( "#prod2color" ).css('background-color',rightColor);
                
                if(ui.value>=350 && ui.value<=700){
                    $( "#prod1color").css('opacity',(ui.value-350)*2/700);
                    $( "#prod2color").css('opacity',(ui.value-350)*2/700);
                }else if(ui.value>=0 && ui.value<350){
                    $( "#prod1color").css('opacity',(-1)*(ui.value-350)*2/700);
                    $( "#prod2color").css('opacity',(-1)*(ui.value-350)*2/700);
                }
              
              
            }
          });

          $( "#amount-input1" ).val(1);
          $( "#amount-input2" ).val(1);
        });
        </script>
    {%endblock%}
{% endblock %}
